CSS List

In HTML, there are two types of lists:
  1. unordered lists - the list items are marked with bullets
  2. ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
The type of list item marker is specified with the list-style-type property: Example
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>

Output

  To specify an image as the list item marker, use the list-style-image property:

Example of unordered lists:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Example of ordered lists:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Example 2
<!DOCTYPE html> 
<html>
 <head>
 <style>
 ul { list-style-image:url(?sqpurple.gif?); }
 </style>
 </head>
 <body> 
<ul> <li>Coffee</li>
 <li>Tea</li>
 <li>Coca Cola</li> 
</ul>
 </body> 
</html>

Output

  • Coffee
  • Tea
  • Coca Cola

All Tutorial => 12345678910





Write Comment







Search

Categories CSS Introduction CSS List CSS Syntax External Style Sheet CSS Background CSS box models CSS Style Link Table Formating CSS Dimenssion CSS Font

Facebook Like page